<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/layui_v2/css/layui.css" media="all"/>
    <style type="text/css">

        /*设置头像单元格大小*/
        .layui-table-cell {
            height: 50px;
            line-height: 55px;
            text-align: center;
        }

        /* 分页向右
         .layui-table-page {
             float: right;
         }*/

    </style>
</head>
<body>
<blockquote class="layui-elem-quote layui-form">
    <div class="layui-inline">
        <label class="layui-form-label">员工姓名:</label>
        <div class="layui-input-inline">
            <select id="search_name" lay-filter="search_name">
            </select>
        </div>
    </div>
    <button id="add_dept_btn" class="layui-btn layui-btn-radius" style="margin-left: 20px;"><i class="layui-icon">&#xe61f;</i>添加
    </button>
</blockquote>
<!-- 表格 -->
<table id="emp_table" class="layui-table" lay-filter="emp_table"></table>

<script src="${pageContext.request.contextPath}/layui/layui_v2/layui.js"></script>
<script>
    layui.use(['table', 'jquery', 'layer', 'form'], function () {
        var $ = layui.jquery,
            table = layui.table,
            layer = layui.layer,
            form = layui.form;


        //设置表头
        var clos = [[{
            field: "id", title: '员工编号', width: 100, sort: true, align: 'center'
        }, {
            field: 'truename', title: '员工真实姓名', width: 170, align: 'center', edit: 'text'
        }, {
            field: 'dept', title: '所在部门', width: 170, align: 'center', templet: '#deptTel'
        }, {
            field: 'loginname', title: '登录名', width: 170, align: 'center'
        }, {
            field: 'psw', title: '登录密码', width: 170, align: 'center'
        }, {
            field: 'sex', title: '员工性别', width: 170, align: 'center', templet: '#deptsex', event: 'edit_sex'
        }, {
            field: 'img',
            title: '员工头像',
            width: 170,
            align: 'center',
            templet: '#imgtmplet'
        }, {
            field: 'flag', title: '员工类别', width: 170, align: 'center', templet: '#flagTel'
        }, {
            field: 'admin', title: '权限级别', width: 170, align: 'center', templet: '#adminTel'
        }, {
            title: '操作', width: 230, toolbar: '#bardo', align: 'center'
        }]];

        //table 数据接口
        var tableUrl = '${pageContext.request.contextPath}/empAction_pageQuery.action?is=1';

        //方法级别渲染表格
        var tableIns = table.render({
            elem: '#emp_table'
            , id: 'emp_table_info'
            , height: 'auto'
            , method: 'post'
            , cols: clos
            , url: tableUrl
            , page: true
            , limits: [7, 14, 20]
            , limit: 7
        });


        //监听排序切换
        table.on('sort(emp_table)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
//            console.log(obj.field); //当前排序的字段名
//            console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
//            console.log(this); //当前排序的 th 对象

            //尽管我们的 table 自带排序功能，但并没有请求服务端。
            //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，如：
            table.reload('emp_table_info', {
                initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数
                , where: { //请求参数
                    field: obj.field //排序字段
                    , order: obj.type //排序方式
                }
            });
        });


        //监听单元格编辑
        table.on('edit(emp_table)', function (obj) {
            var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
            layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value);

        });

        //监听工具条
        table.on('tool(emp_table)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if (layEvent === 'del') { //删除
                //检查该员工是否有未交接的客户
                $.post('${pageContext.request.contextPath}/empAction_checkCanDepart.action', {id: data.id},
                    function (result) {
//                            layer.alert(result);
                        if (result == 'true') {
                            //可以删除
                            del_emp(data);
                        } else {
                            //不能删除
                            var info = '请先交接该员工名下客户!!';
                            layer.alert(info, {title: '离职失败'});
                        }
                    }
                );

            } else if (layEvent === 'edit') { //编辑
                //do something
                edit_dept(data);
            } else if (layEvent === 'edit_sex') { // 监听修改姓名
                layer.msg(data.sex);
            }
        });

        //离职员工
        function del_emp(data) {

            var info = '确认要离职 <a style="color: red;font-size: 24px">' + data.id + '</a> 号员工吗？';

            layer.confirm(info, {icon: 3, title: '离职确定'}, function (index) {
                layer.close(index);
                //向服务端发送删除指令
                $.post('${pageContext.request.contextPath}/empAction_departEmp.action', data,
                    function (result) {
                        if (result.trim() == 'success') {
                            layer.alert('离职成功');
                            //重新加载数据
                            tableIns.reload();
                        } else {
                            layer.alert('离职失败');
                        }
                    });

            });
        }

        //修改员工
        function edit_dept(data) {
            layer.open({
                type: 2,
                title: '修改部门',
                area: ['650px', '700px'],
                content: '${pageContext.request.contextPath}/empAction_beforeEditEmp.action?id=' + data.id //这里content是一个普通的String
            });
        }

        //添加员工按钮
        $("#add_dept_btn").click(function () {
            layer.open({
                type: 2,
                title: '添加部门',
                area: ['650', '700px'],
                content: '${pageContext.request.contextPath}/pages_emp_addEmp.action' //这里content是一个普通的String
            });
            //刷新表单的选中状态,动态添加的表单必须要做次操作
//            form.render('select', 'add_emp_form');
//            form.render('radio', 'add_emp_form');
            form.render();

        });

        //员工搜索
        //姓名选择
        $.post("${pageContext.request.contextPath}/empAction_findAllNames.action?is=1", function (data) {
            var options = '<option value="">--请选择--</option>';

            for (var i = 0; i < data.length; i++) {
                //拼字符串时千万不能出错，尤其是value不能有空格
                options += '<option value="' + data[i].truename + '">' + data[i].truename + '</option>';
            }

            $("#search_name").append(options);

            form.render();
        });

        //监听姓名选择，模糊搜索
        form.on('select(search_name)', function (data) {
            tableIns.reload({
                where: {truename: data.value}
            });
        });

    });


</script>
<%--图片--%>
<script type="text/html" id="imgtmplet">
    {{#  if(d.img !== ''){ }}
    <div><img src="{{d.img}}" class="layui-circle"
              style=" width: 50px;height: 50px;border: 1px solid plum;padding: 2px;"/></div>;
    {{#  } else { }}
    <div><img src="images/face.jpg" class="layui-circle"
              style=" width: 50px;height: 50px;border: 1px solid hotpink;padding: 2px;"/></div>;
    {{#  } }}
</script>

<%--性别--%>
<script type="text/html" id="deptsex">
    {{#  if(d.sex === '男'){ }}
    <span style="color: #3523f5;">男<i class="layui-icon">&#xe662;</i></span>
    {{#  } else { }}
    <span style="color: #dd14f5;">女<i class="layui-icon">&#xe661;</i></span>
    {{#  } }}
</script>
<%--员工级别--%>
<script type="text/html" id="flagTel">
    {{#  if(d.flag === 0 ){ }}
    <span style="color: #000;">普工</span>
    {{#  } else { }}
    <span style="color: #F581B1;">部门主管</span>
    {{#  } }}
</script>
<%--员工操作级别--%>
<script type="text/html" id="adminTel">
    {{#  if(d.admin === 0 ){ }}
    <span style="color: #000;">普通操作者</span>
    {{#  } else { }}
    <span style="color: #F581B1;">部门主管</span>
    {{#  } }}
</script>
<%--部门--%>
<script type="text/html" id="deptTel">
    {{#  if(d.dept === null){ }}
    <span style="color: #f5120c;">待议</span>
    {{#  } else { }}
    <span style="color: #000;">{{d.dept.name}}</span>
    {{#  } }}
</script>
<%--工具条--%>
<script type="text/html" id="bardo">
    <a class="layui-btn layui-btn-mini" lay-event="edit"><i class="layui-icon">&#xe642;</i>修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del"><i class="layui-icon">&#xe640;</i>离职</a>
</script>

</body>
</html>
